<template>
  <div class="add">
    <!-- 步骤条 -->
    <el-steps
      :active="active-0"
      finish-status="success" >
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
      <el-step title="步骤 4"></el-step>
      <el-step title="步骤 5"></el-step>
    </el-steps>
    <!-- 标签页 tab-position:top  选项卡所在位置(顶部) -->
    <template>
      <el-form style="margin-top:20px;">
        <el-tabs
          v-model="active"
          tab-position='left' >
          <el-tab-pane
            label="基本信息"
            name="0" >
            <el-form
              :model="goodsForm"
              :rules="goodsForm"
              ref="goodsForm"
              label-width="100px"
              class="demo-ruleForm" >
              <el-form-item
                label="商品名称"
                prop="goods_name" >
                <el-input v-model="goodsForm.goods_name"></el-input>
              </el-form-item>
              <el-form-item
                label="商品价格"
                prop="goods_price" >
                <el-input
                  v-model="goodsForm.goods_price"
                  type='number'
                ></el-input>
              </el-form-item>
              <el-form-item
                label="商品重量"
                prop="goods_weight" >
                <el-input
                  v-model="goodsForm.goods_weight"
                  type='number'
                ></el-input>
              </el-form-item>
              <el-form-item
                label="商品数量"
                prop="goods_number" >
                <el-input
                  v-model="goodsForm.goods_number"
                  type='number'
                ></el-input>
              </el-form-item>
              <el-form-item label="商品分类">
                <!-- options 可选项数据源 -->
                <el-cascader
                  :options="cateList"
                  v-model="selectedOptions"
                  @change="handleChange"
                  :props='goodprops'
                  :clearable='true' >
                </el-cascader>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane
            label="商品参数"
            name="1"
          >配置管理</el-tab-pane>
          <el-tab-pane
            label="商品属性"
            name="2"
          >角色管理</el-tab-pane>
          <el-tab-pane
            label="商品图片"
            name="3" >
            <!-- 上传图片 -->
            <!-- action 上传图片的目标地址 -->
            <!-- :on-preview="handlePreview" 预览图片 -->
            <!-- :on-remove="handleRemove" 文件列表移除文件时的钩子function(file, fileList)-->
            <!-- :file-list="picfileList" 上传的文件列表 数组类型 -->
            <!-- :on-success="uploadSuccess"文件上传成功时的钩子 -->
            <!-- :before-upload='uploadBeforeValid' 文件上传之前的触发事件 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 -->
            <!-- list-type="picture" 文件上传后的显示方式 -->
            <!-- :headers='getToken()' 设置token -->
            <!-- 只要是变化的值或者方法，则需要在前面加上冒号:  -->
            <!-- el-upload是内部封装了单独的axios请求，所以之前的拦截器不起作用，需要重新设置请求头，添加token，
                  Authorization这个名称不能修改，因为后台指定的
                   -->
            <!-- action:设置这个值的原因是因为我们是通过本地搭建的服务器来作为项目服务器 -->
            <!--
                 http://127.0.0.1:8888:服务器的地址：ip+端口 | 域名+端口
                /private/v1：目录
                /upload：路由名称
             -->
            <el-upload
              class="upload-demo"
              action="http://127.0.0.1:8888/api/private/v1/upload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              :on-success="uploadSuccess"
              :before-upload='uploadBeforeValid'
              :headers='getToken()'
              list-type="picture" >
              <el-button
                size="small"
                type="primary"
              >点击上传</el-button>
              <div
                slot="tip"
                class="el-upload__tip"
              >只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-tab-pane>
          <el-tab-pane
            label="商品分类"
            name="4"
          >
          <quill-editor
          v-model="content"
          ref="myQuillEditor"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @ready="onEditorReady($event)">
        </quill-editor>
          </el-tab-pane>
        </el-tabs>
        <el-button
                type="success"
                style="float:right;"
                @click="addGoods('goodsForm')"
                class="btn"
              >确认提交</el-button>
      </el-form>
    </template>
    <!-- 图片预览弹框 -->
    <el-dialog title="图片预览" :visible.sync="picdialogFormVisible">
      <img :src="userPic" alt="">
    </el-dialog>

  </div>
</template>
<script>
import { getCategoriesList, addGoods } from '@/api'
export default {
  data () {
    return {
      active: '0',
      // 商品信息
      goodsForm: {
        goods_name: '',
        goods_cat: '',
        goods_price: '',
        goods_number: '',
        goods_weight: '',
        goods_introduce: '',
        pics: [],
        attrs: ''
      },
      cateList: [],
      // 获取被选择的子元素及其父元素的value值，即goodsprops中的value
      // props 里面的值会传给selectedOptions
      selectedOptions: [],
      // props ---> goodprops
      // value
      // 指定选项的值为选项对象的某个属性值
      // label
      // 指定选项标签为选项对象的某个属性值
      // children
      // 指定选项的子选项为选项对象的某个属性值
      goodprops: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },
      // 上传的图片列表
      fileList: [],
      // 控制图片预览弹框的显示和隐藏
      picdialogFormVisible: false,
      // 用户头像
      userPic: ''
    }
  },
  methods: {
    handleChange (value) {
      // console.log(this.selectedOptions)
      // console.log(value) // (3)[1, 4, 25, __ob__: Observer]
      // 获取子元素及其父元素的id，并通过 , 拼接成字符串
      this.goodsForm.goods_cat = value.join(',')
      // console.log(this.goodsForm.goods_cat)
    },
    // 实现基本信息的提交功能
    addGoods (addGoodsInfo) {
      // 自定义表单验证 -- 判断信息是否填入完整
      this.$refs[addGoodsInfo].validate(valid => {
        if (valid) {
          // 调用接口，实现添加操作
          addGoods(this.goodsForm).then(res => {
            console.log(res)
            // 判断是否发送请求成功
            if (res.meta.status === 201) {
              // 给出提示
              this.$message({
                message: res.meta.msg,
                type: 'success'
              })
              // 跳转到list页面
              this.$router.push({name: 'List'})
            } else {
              // 给出提示
              this.$message({
                message: res.meta.msg,
                type: 'error'
              })
            }
          })
        } else {
          // 给出提示
          this.$massage('用户输入数据不完整')
          return false
        }
      })
    },
    // 上传图片
    // 文件列表移除文件时
    handleRemove (file, fileList) {
      // console.log(file, fileList)
      // 判断有没有file.response
      if (!file.response) {
        // 没有 不往下执行
        return
      }
      // 获取要删除的图片
      var deletePic = file.response.data.tmp_path
      // 获取对应图片在pic数组中的索引值
      // findIndex()是一个回调函数，有返回值 value就是遍历
      var index = this.goodsForm.pics.findIndex((value) => {
        return value.pic.indexOf(deletePic) !== -1
      })
      // 实现删除
      this.goodsForm.pics.splice(index, 1)
    },
    // 图片预览
    handlePreview (file) {
      // console.log(file)
      this.picdialogFormVisible = true
      // 设置图片路径实现图片预览
      this.userPic = 'http://localhost:8888/' + file.response.data.tmp_path
    },
    // 图片上传成功时
    uploadSuccess (response, file, fileList) {
      // console.log(response, file, fileList)
    },
    // 上传图片之前
    uploadBeforeValid (file) {
      console.log(file)
      // 判断图片大小是否符合
      if (file.size > 500 * 1024) {
        // 给出提示
        this.$message.warning('图片大小大于指定大小')
        return false
      }
    },
    // 设置token  -- 上传图片有自己的路径，拦截器无法拦截
    getToken () {
      // 获取token
      var token = localStorage.getItem('itcast_token')
      return {Authorization: token}
    }

  },
  mounted () {
    // 展示商品分类信息
    getCategoriesList(3).then(res => {
      // console.log(res)
      if (res.meta.status === 200) {
        this.cateList = res.data
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.quill-editor{
  height: 300px;
  border-bottom: 1px solid #ccc;
  .ql-container {
    height: 250px;
  }
}
.btn {
  margin-top: 20px;
  float: right;
}
</style>
